<template>
  <el-dialog
    title="新增子公司"
    :visible.sync="isShowModel"
    :before-close="handleClose"
    :close-on-click-modal="false"
    top="4vh"
    @close="$emit('update:isShowDetail', false)" class="addSubsidiary">
    <el-form :model="subsidiaryInfo" ref="subsidiaryInfo" label-width="120px" :rules="rules">
      <el-form-item label="名称：" required prop="userName">
        <el-input v-model="subsidiaryInfo.userName" clearable autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="账号：" required prop="telphone">
        <el-input v-model="subsidiaryInfo.telphone" clearable autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码：" required prop="password">
        <el-input v-model="subsidiaryInfo.password" autocomplete="off" type="password"></el-input>
      </el-form-item>
      <el-form-item label="管理区域：" required>
        <AreaInput :searchInfo.sync="subsidiaryInfo"></AreaInput>
      </el-form-item>
      <el-form-item label="联系电话：" required prop="contact">
        <el-input v-model="subsidiaryInfo.contact" clearable autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="联系地址：" required prop="detailAdress">
        <el-input v-model="subsidiaryInfo.detailAdress" clearable autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="营业执照：" >
        <img v-if="subsidiaryInfo.licenseImage" :src="subsidiaryInfo.licenseImage" class="avatar">
        <el-button type="primary" @click="showLicenseCropper" class="mt20">上传图片</el-button>
        <p>文件不能超过1MB</p>
      </el-form-item>
      <el-form-item label="法人身份证：" required >
        <el-row :gutter="10">
          <el-col :span="11">
            <i>法人身份证（正面）</i>
            <img v-if="identityFrontCard" :src="identityFrontCard" class="avatar">
            <div>
              <el-button type="primary" @click="showFrontCardCropper" class="mt20">上传图片</el-button>
            </div>
            <p>文件不能超过1MB</p>
          </el-col>
          <el-col :span="11">
            <i>法人身份证（反面）</i>
            <img v-if="identityBackCard" :src="identityBackCard" class="avatar">
            <div>
              <el-button type="primary" @click="showBackCardCropper" class="mt20">上传图片</el-button>
            </div>
            <p>文件不能超过1MB</p>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="closeModel">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </span>
    <jxf-cropper
      :uploadUrl="upload"
      :isShowCropper.sync="isShowCropper"
      :tCropWidth="tCropWidth"
      :tCropHeight="tCropHeight"
      :dealImage.sync="dealImage"
      @getChangedImage="getChangeImage"
      :dataSize="5"></jxf-cropper>
  </el-dialog>
</template>

<script>
  import md5 from 'js-md5'
    export default {
        name: "AddSubsidiaryModel",
        props: {
          isShowDetail: {
            type: Boolean,
            default: false
          }
        },
        data() {
          // 自定义验证法人身份证
          var identity = (rule, value, callback) => {
              if(!this.identityFrontCard && !this.identityBackCard) {
                return callback(new Error('法人身份证不能为空'))
              }
              if(!this.identityFrontCard) {
                return callback(new Error('法人正面照不能为空'))
              }
              if(!this.identityBackCard) {
                return callback(new Error('法人反面照不能为空'))
              }
            }

          return {
            // 裁剪
            isShowCropper: false,
            tCropWidth: 800,
            tCropHeight: 800,
            dealImage: "",
            currentImage: '',
            upload: apis.architecture.upload,
            isShowModel: this.isShowDetail,
            /***********/
            subsidiaryInfo: {
              cityId: "",
              contact: "",
              detailAdress: "",
              identityCardImage: "",
              licenseImage: "",
              password: "",
              provinceId: "",
              telphone: "",
              userName: ""
            },
            // 法人正面照
            identityFrontCard: "",
            identityBackCard: "",
            // 法人反面照
            rules: {
              userName: [
                { required: true, message: '请输入名称', trigger: ['change', 'blur'] }
              ],
              telphone: [
                { required: true, message: '请输入账号', trigger: ['change', 'blur'] },
                {validator: validate.phone, trigger: 'blur'}
              ],
              password: [
                { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
                { min: 6, max: 12, message: '密码长度为6-12位', trigger: ['blur', 'change'] },
              ],
              contact: [
                { required: true, message: '请输入联系电话', trigger: ['change', 'blur'] },
                {validator: validate.phone, trigger: 'blur'}
              ],
              detailAdress: [
                { required: true, message: '请输入联系地址', trigger: ['change', 'blur'] }
              ],
              identityCardImage: [
                { validator: identity, trigger: ['change', 'blur'] }
              ]
            }
          }
        },
        methods: {
          /***********/
          showLicenseCropper() {
            this.currentImage = '1';
            this.dealImage = this.subsidiaryInfo.licenseImage;
            this.isShowCropper = true;
          },
          getChangeImage(val) {
            switch (this.currentImage) {
              case '1':
                this.subsidiaryInfo.licenseImage = val;
                break;
              case '2':
                this.identityFrontCard = val;
                break;
              case '3':
                this.identityBackCard = val;
                break
              default:
                break;
            }
          },
          showFrontCardCropper() {
            this.currentImage = '2';
            this.dealImage = this.identityFrontCard;
            this.isShowCropper = true;
          },
          showBackCardCropper() {
            this.currentImage = '3';
            this.dealImage = this.identityBackCard;
            this.isShowCropper = true;
          },
          /***********/

          handleClose(done) {
            this.resetForm()
            done()
          },
          closeModel() {
            this.resetForm()
            this.$emit('update:isShowDetail', false)
          },
          // 重置
          resetForm() {
            this.subsidiaryInfo = {
              cityId: "",
              contact: "",
              detailAdress: "",
              identityCardImage: "",
              licenseImage: "",
              password: "",
              provinceId: "",
              telphone: "",
              userName: ""
            }
            this.currentImage = ''
            this.identityFrontCard = ""
            this.identityBackCard = ""
            this.$refs['subsidiaryInfo'].resetFields()
          },
          submitForm() {
            this.subsidiaryInfo.identityCardImage = this.identityFrontCard + ',' + this.identityBackCard;
            let data = {
              ...this.subsidiaryInfo,
              password: md5(this.subsidiaryInfo.password).toUpperCase(),
            }
            this.$refs['subsidiaryInfo'].validate((valid) => {
                if (valid) {
                  ajax.post(apis.architecture.addSubsidiary, data).then(res => {
                    if(res.code === "10000000") {
                      this.$message({
                        type: 'success',
                        message: '操作成功!'
                      });
                      this.$emit('fresh')
                      this.closeModel()
                    } else {
                      this.$message.error(res.message)
                    }
                  })
                }})
          }
        },
        watch: {
          isShowDetail(val) {
            this.isShowModel = val
          }
        }
    }
</script>

<style lang="scss">
  .addSubsidiary {
    .el-dialog {
      max-width: 700px;
      min-width: 700px;
      .el-form {
        .el-input {
          max-width: 300px;
        }
        img {
          width: 120px;
          height: 120px;
        }
      }
    }
  }
</style>
